import api from '../../../api/index';
import * as echarts from '../../../components/ec-canvas/echarts';


//全局声明chart
var seriesDataArr = [];
var timeArr = [];
var chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    loading: false,
    showecharts: false,
		ec: {
			// 初始化图表
			onInit: (canvas, width, height) => {
				//初始化echarts元素，绑定到全局变量，方便更改数据
				chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				return chart;
			}
		},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const id = options.id
    this.getdesic(id)
  },
  getdesic(id) {
    api
      .post(`/api/exams/record/${id}`)
      .then((res) => {
        // console.log(res);
        console.log('----报告详情----', res);
        let xAxisData = []
        let yAxisData = []
        if (res.length > 0) {
          let list = res[0]
          if (list.devices.length > 0) {
            if (list.devices[0].appendix) {
              console.log(JSON.parse(list.devices[0].appendix))
              const value = JSON.parse(list.devices[0].appendix)
              this.setData({
                ecgResult: value.ecgResult,
                unscramble: value.unscramble
              })
                xAxisData = value.time,
                yAxisData = value.ecgData
            }
          }
          console.log(list);
        }
        // 模拟获取接口数据
					setTimeout(() => {
						this.getEchartData(xAxisData,yAxisData);
					}, 1000);

      });
  },
  // 绘制图表
	runColumncCanva(arr) {
		var option = {
			title: {
				// text: '次/分',
				textStyle: {
					fontSize: 9,
					color: '#666666'
				}
			},
			color: ['#37A2DA'],
			legend: {
				data: ['心率变化趋势'],
				icon: 'circle',
				left: 0,
				itemWidth: 9,
				// itemStyle: {
				//     color: '#5BBF70'
				// },
				textStyle: {
					color: '#333333',
					fontSize: 13
				}
			},
			grid: {
				left: '0%',
				right: '1%',
				bottom: '20%',
				top: '0%',
				containLabel: true,
				show: false
			},

			tooltip: {
				show: false,
				trigger: 'axis'
			},
			xAxis: {
				show: true,
						type: 'category',
						boundaryGap: false,
						data: arr,
						axisLabel: {
				  show: false,
							fontSize: 12,
							rotate: 0 //倾斜度 -90 至 90 默认为0
				},
				axisLine: {
				  show: false,
				},
				splitLine: {
				  show: true,
				  lineStyle: {
					color: "#D4DFF5",
				  },
				},
			},
			yAxis: {
				type: 'value',
      			  show: true,
      			  axisLine: {
      			    show: false,
      			  },
			splitLine: {
    		    lineStyle: {
    		      color: '#D4DFF5',
      			    type: "dashed"
      			  },
      		},
				axisLabel: {
    				show: false,
					fontSize: 16
				}
    		},
			series: seriesDataArr,
			dataZoom: [{ // 这是dataZoom组件
			  type: 'slider', // 这里可以选择你需要的dataZoom类型
			  start: 0, // 默认数据初始选择范围为10%
			  end: 16 // 默认数据结束选择范围为100%
		  }]
		};
		//这里一定要做个charts是否存在的判断，因为万一ec那里没有初始化，这里就会报错
		if (chart) {
			chart.setOption(option);
			this.setData({
				show: true
			});
		}
	},
	getEchartData(xAxisData,yAxisData) {
		var length = yAxisData.length; // 例如，长度为5
    // 创建并填充数组
    var arr = [];
    for (var i = 1; i <= length; i++) {
        arr.push(i);
    }
    console.log(arr);
		seriesDataArr = [
			{
				name: '心率变化趋势',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: yAxisData,
				lineStyle: {
					width: 1,
					shadowColor: 'rgba(0,0,0,0.1)',
					shadowBlur: 10,
					shadowOffsetY: 8
				  },
			}
		];
		this.runColumncCanva(arr);
	},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})